<template>
	<div class="wrapper">
		<!-- 顶部应用栏 -->
		<header class="mdc-top-app-bar">
			<div class="mdc-top-app-bar__row">
				<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
					<button class="mdc-button mdc-button--text back-btn" @click="goBack">
						<i class="material-icons">arrow_back</i>
					</button>
					<h1 class="mdc-top-app-bar__title">登录</h1>
				</section>
			</div>
		</header>

		<!-- 主要内容区域 -->
		<div class="main-content">
			<div class="login-container">
				<div class="login-card">
					<div class="login-header">
						<div class="login-icon">
							<i class="material-icons">account_circle</i>
						</div>
						<h2>欢迎回来，这里是饿了麽</h2>
						<p>请登录您的账户，以开始点单</p>
					</div>

					<div class="login-form">
						<form @submit.prevent="login">
							<div class="input-group">
								<div class="input-field">
									<i class="material-icons">person</i>
									<input 
										v-model="userId" 
										type="text" 
										placeholder="请输入您的账号"
										required
									>
								</div>
							</div>

							<div class="input-group">
								<div class="input-field">
									<i class="material-icons">lock</i>
									<input 
										v-model="password" 
										type="password" 
										placeholder="请输入您的密码"
										required
									>
								</div>
							</div>

							<button 
								type="submit" 
								class="mdc-button mdc-button--raised login-btn"
								:disabled="loading"
							>
								<i class="material-icons" v-if="!loading">login</i>
								<i class="material-icons loading-icon" v-else>refresh</i>
								<span class="mdc-button__label">{{ loading ? '登录中...' : '用户登录' }}</span>
							</button>

							<button 
								type="button" 
								class="mdc-button mdc-button--outlined register-btn"
								@click="register"
							>
								<i class="material-icons">person_add</i>
								<span class="mdc-button__label">用户注册</span>
							</button>
						</form>
					</div>
				</div>
			</div>
		</div>

		<!-- 底部导航 -->
		<AppFooter></AppFooter>
	</div>
</template>

<script>
	import AppFooter from '../components/AppFooter.vue';
	
	export default{
		name:'AppLogin',
		data(){
			return {
				userId:'',
				password:'',
				loading: false
			}
		},
		methods:{
			goBack() {
				this.$router.go(-1);
			},
			login(){
				if(this.userId==''){
					this.$toast?.error('用户名不能为空！');
					return;
				}
				if(this.password==''){
					this.$toast?.error('密码不能为空！');
					return;
				}
				
				this.loading = true;
				
				//登录请求（保持原有API）
				this.$axios.post('UserController/getUserByIdByPass',this.$qs.stringify({
					userId:this.userId,
					password:this.password
				})).then(response=>{
					let user = response.data;
					if(user==null){
						this.$toast?.error('用户名或密码不正确！');
					}else{
						//sessionstorage有容量限制，为了防止数据溢出，所以不将userImg数据放入session中
						user.userImg = '';
						this.$setSessionStorage('user',user);
						this.$toast?.success('登录成功！');
						this.$router.go(-1);
					}
				}).catch(error=>{
					console.error(error);
					this.$toast?.error('登录失败，请稍后重试！');
				}).finally(() => {
					this.loading = false;
				});
			},
			register(){
				this.$router.push({path:'register'});
			},
		},
		components:{
			AppFooter
		}
	}
</script>

<style scoped>
	/* 重置样式 */
	* {
		box-sizing: border-box;
	}

	.wrapper {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 顶部应用栏 */
	.mdc-top-app-bar {
		background-color: #1976D2;
		color: white;
		position: sticky;
		top: 0;
		z-index: 100;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}

	.mdc-top-app-bar__row {
		display: flex;
		align-items: center;
		height: 72px;
		padding: 0 20px;
	}

	.mdc-top-app-bar__section {
		display: flex;
		align-items: center;
		gap: 16px;
		flex-direction: row;
	}

	.mdc-top-app-bar__title {
		font-size: 22px;
		font-weight: 500;
		margin: 0;
		white-space: nowrap;
		line-height: 1;
	}

	.back-btn {
		background: none;
		border: none;
		color: white;
		padding: 20px;
		cursor: pointer;
		border-radius: 50%;
		transition: all 0.2s ease;
		display: flex;
		align-items: center;
		justify-content: center;
		transform: translateY(3px);
	}

	.back-btn:hover {
		background-color: rgba(255, 255, 255, 0.15);
		transform: translateY(8px) scale(1.05);
	}

	.back-btn .material-icons {
		font-size: 28px;
	}

	/* 主要内容区域 */
	.main-content {
		padding: 20px 16px;
		padding-bottom: 120px; /* 为底部导航留出空间 */
	}

	.login-container {
		max-width: 400px;
		margin: 0 auto;
	}

	.login-card {
		background-color: white;
		border-radius: 16px;
		box-shadow: 0 4px 20px rgba(0,0,0,0.1);
		overflow: hidden;
	}

	.login-header {
		background: linear-gradient(135deg, #1976D2 0%, #42A5F5 100%);
		color: white;
		padding: 32px 24px;
		text-align: center;
	}

	.login-icon {
		margin-bottom: 16px;
	}

	.login-icon .material-icons {
		font-size: 64px;
		opacity: 0.9;
	}

	.login-header h2 {
		font-size: 28px;
		font-weight: 300;
		margin: 0 0 8px 0;
	}

	.login-header p {
		font-size: 16px;
		opacity: 0.9;
		margin: 0;
	}

	.login-form {
		padding: 32px 24px;
	}

	.input-group {
		margin-bottom: 20px;
	}

	.input-field {
		position: relative;
		display: flex;
		align-items: center;
		background-color: #f8f9fa;
		border: 2px solid #e9ecef;
		border-radius: 12px;
		padding: 0 16px;
		transition: all 0.3s ease;
	}

	.input-field:focus-within {
		border-color: #1976D2;
		background-color: white;
		box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
	}

	.input-field .material-icons {
		color: #666;
		margin-right: 12px;
		font-size: 20px;
	}

	.input-field input {
		flex: 1;
		border: none;
		outline: none;
		background: transparent;
		padding: 16px 0;
		font-size: 16px;
		color: #333;
	}

	.input-field input::placeholder {
		color: #999;
	}

	/* 按钮样式 */
	.mdc-button {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 16px 24px;
		border-radius: 12px;
		font-size: 16px;
		font-weight: 500;
		text-transform: none;
		transition: all 0.3s ease;
		cursor: pointer;
		border: none;
		width: 100%;
		margin-bottom: 16px;
	}

	.mdc-button--raised {
		background-color: #1976D2;
		color: white;
		box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
	}

	.mdc-button--raised:hover:not(:disabled) {
		background-color: #1565C0;
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(25, 118, 210, 0.4);
	}

	.mdc-button--outlined {
		background-color: transparent;
		color: #1976D2;
		border: 2px solid #1976D2;
	}

	.mdc-button--outlined:hover {
		background-color: #1976D2;
		color: white;
	}

	.mdc-button:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}

	.mdc-button .material-icons {
		font-size: 20px;
	}

	.loading-icon {
		animation: spin 1s linear infinite;
	}

	@keyframes spin {
		from { transform: rotate(0deg); }
		to { transform: rotate(360deg); }
	}

	.mdc-button__label {
		font-weight: 500;
	}

	/* 响应式设计 */
	@media (max-width: 600px) {
		.main-content {
			padding: 16px 12px;
		}
		
		.login-header {
			padding: 24px 20px;
		}
		
		.login-form {
			padding: 24px 20px;
		}
		
		.login-header h2 {
			font-size: 24px;
		}
		
		.login-icon .material-icons {
			font-size: 56px;
		}
	}
</style>
